<template>
  <div class="app-container">
    <div style="display: flex;align-items: center;height: 60px;">
      <div class="header">推送通知</div>
      <el-button @click="dialogVisibleClick">新增</el-button>
<!--      <el-button @click="dialogVisible=true">新增</el-button>-->
    </div>

    <el-form :model="model" label-width="80px">
      <el-form-item label="推送消息">
        <el-input v-model="model.content" placeholder="请输入推送消息"></el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      title="新增推送通知"
      :visible.sync="dialogVisible"
      width="70%">
      <el-form ref="transfer" :model="transfer" :rules="transferRules" label-width="180px">
        <el-form-item label="是否随机" prop="status">
          <el-radio-group v-model="transfer.status">
            <el-radio :label="0">随机</el-radio>
            <el-radio :label="1">指定模板内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推送消息" prop="id" v-if="transfer.status==1">
          <el-select v-model="transfer.id" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行为描述" prop="behavior">
          <el-input v-model="transfer.behavior" placeholder="请输入行为描述"></el-input>
        </el-form-item>
        <el-form-item label="获得的东西描述" prop="something">
          <el-input v-model="transfer.something" placeholder="请输入获得的东西描述"></el-input>
        </el-form-item>
        <el-form-item label="预览文案" v-if="content">
          <el-input v-model="content" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="transferSubmit">生 成</el-button>
        <el-button type="primary" v-if="content" @click="submit">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  pushNotification,
  getOne,
  templateList,
  advanceTemplate
} from "@/api/settings/settings";

export default {
  data() {
    return {
      options: [],
      model: {
        content: undefined
      },
      dialogVisible: false,
      transferRules: {
        content: [
          {required: true, message: '请输入推送消息', trigger: 'blur'}
        ],
        behavior: [
          {required: true, message: '请输入推送消息', trigger: 'blur'}
        ],
        something: [
          {required: true, message: '请输入获得的东西描述', trigger: 'blur'}
        ],
      },
      // 转赠
      transfer: {
        id:undefined,
        behavior:undefined,
        something:undefined,
        status:0
      },
      content:null
    }
  },
  created() {
    this.getmGiftingSet()
    this.gettemplateList()
  },
  methods: {
    dialogVisibleClick(){
      this.dialogVisible = true
      this.transfer.status=0
      this.transfer.behavior=undefined
      this.transfer.something=undefined
      this.transfer.id=undefined
      this.content=undefined
    },
   async submit(){
     await pushNotification({content:this.content})
     this.dialogVisible = false
     this.$message({
       message: '发布成功',
       type: 'success'
     });
    },
    async transferSubmit(){
      let res = await advanceTemplate(this.transfer)

      this.content = res.data
      this.$message({
        message: '预生成成功',
        type: 'success'
      });

    },
    async gettemplateList(){
      let res = await templateList()
      this.options = res.data.map(item=>{
        return{
          value: item.id,
          label: item.templateContent
        }
      })
    },
    async getmGiftingSet() {
      let res = await getOne()
      this.model.content = res.data.content
    },
  }
}
</script>
<style scoped lang="scss" scoped>
.header {
  height: 60px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-right: 10px;
  line-height: 70px;
}
</style>
